<script>
// import { mapWritableState } from 'pinia';
import {mapWritableState, mapActions} from 'pinia'
import { useUserStore } from '../stores/user';
import UserApi from '../api/user';
export default {
    methods: {
    ...mapActions(useUserStore, ["logoutState"]),
    async logout() {
      const api = new UserApi();
      let res = await api.logout(); 
      console.log(res);
      if (res.code === 200 && res.data.logoutStatus === "success") {
      // this.isLogin = false;
        this.logoutState();
        this.$router.replace("/login");
      }
    } 
  },
  computed: {
    ...mapWritableState(useUserStore, ["isLogin"])
  },
};
</script>

<template>
    <header>
    <div class="logo">
        <img alt="warehouse logo" src="@/assets/logo.png" />
        <h1>校园物品托管仓库管理系统</h1>
    </div>
     <div class="top-nav">
      <template v-if="isLogin">
      <span><router-link to="/profile">我的</router-link></span>
        <span><a href="javascript:void(0);" @click="logout">退出</a></span>
      </template>
      <template v-else>
        <span><router-link to="/login">登录</router-link></span>
        <span>注册</span>
      </template>
    </div>
    </header>
</template>

<style scoped>   
.logo {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.logo img {
    height: 80px;
    flex: 0 0 80px;
}
 
.logo h1 {
    flex: 1 1 auto;
    margin-left: 16px;
}
.top-nav{
    margin-right: 40px;
}
 
.top-nav > span{
    padding: 16px;
}
</style>